import { message, Table, Input, Button, Popconfirm, Form, Select } from 'antd';
import { saveHistoricalAvgWage } from '@/services/city';
import styles from '../components.less';
import MyTable from './MyTableCell'
import moment from 'moment';

class CitySalary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: [
        {
          title: '序号',
          dataIndex: 'id',
          width: '5%',
          render: (text) => (text + 1)
        },
        {
          name: 'payYear',
          title: '年度',
          type: 'yearPicker',
          editable: true,
          dataIndex: 'payYear',
          width: '10%'
        },
        {
          name: 'startDate',
          title: '开始时间',
          dataIndex: 'startDate',
          width: '13%',
          type: 'datePicker',
          editable: true,
        },
        {
          name: 'endDate',
          title: '结束时间',
          type: 'datePicker',
          editable: true,
          dataIndex: 'endDate',
          width: '13%'
        },
        {
          name: 'averageSalary',
          title: '年平均工资',
          dataIndex: 'averageSalary',
          type: 'input',
          width: '12%',
          editable: true,
        },
        {
          name: 'annualSalary',
          title: '月平均工资',
          type: 'input',
          editable: true,
          dataIndex: 'annualSalary',
          width: '12%'
        },
        {
          name: 'payBaseMax',
          title: '缴费基数上线',
          type: 'input',
          dataIndex: 'payBaseMax',
          width: '12%',
          editable: true,
        },
        {
          name: 'payBaseMin',
          title: '缴费基数下线',
          type: 'input',
          dataIndex: 'payBaseMin',
          width: '12%',
          editable: true,
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '20%',
          render: (text, record, index) =>
            this.state.sourcesData.length >= 1 ? (
              <div>
                <Popconfirm title="确认要删除‘城市官网配置’信息吗?" onConfirm={() => this.deleteHandler(index)}>
                  <button type="primary" style={{ margin: '10px' }} >删除</button>
                </Popconfirm>
              </div>
            ) : null,
        },
      ],
      sourcesData: [],
    };
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.sourcesdata.length !== this.state.sourcesData.length) {
      this.setState({
        sourcesData: nextProps.sourcesdata,
      })
    }
  }
  handleAdd = () => {
    const { count, sourcesData } = this.state;
    const { cityCode } = this.props;
    const oDate = new Date();
    const newData = {
      id: sourcesData.length + 1,
      payYear: oDate.getFullYear(),
      startDate: moment(oDate).format('YYYY-MM-DD'),
      endDate: moment(oDate).format('YYYY-MM-DD'),
      averageSalary: '0',
      annualSalary: '',
      payBaseMax: '0',
      payBaseMin: '0',
    };
    this.setState({
      sourcesData: [...sourcesData, newData],
    });
  };
  deleteHandler = (index) => {
    const sourcesData = [...this.state.sourcesData];
    const curData = sourcesData[index];
    const re = sourcesData.filter((item, i) => {
      return item.id != curData.id
    });
    this.setState({ sourcesData: re });
  };
  handleSavesalary = async () => {
    const newData = [...this.state.sourcesData];
    const responseData = await saveHistoricalAvgWage(newData);
    if (responseData && responseData.code === '000000') {
      message.success('操作成功');
    } else {
      alert(responseData.message)
    }
  };
  handleRefreshTable = (row) => {
    const newData = [...this.state.sourcesData].map((data) => {
      if (data.id === row.id) {
        data = row;
      }
      return data;
    });
    this.setState({ sourcesData: newData });
  };
  render() {
    const { sourcesData, columns } = this.state;
    const components = {
      body: {
        row: MyTable.EditableFormRow,
        cell: MyTable.EditableCell,
      },
    };
    const tempColumns = columns.map(col => {
      if (!col.editable) {
        return col;
      }
      return {
        ...col,
        onCell: record => {
          return {
            record,
            ...col,
            handleSave: this.handleRefreshTable,
          }
        },
      };
    });
    return (
      <div>
        <Button onClick={this.handleAdd} type="primary" style={{ marginBottom: 16 }}>
          添加
        </Button>
        <Table
          className={styles['my-edittable']}
          components={components}
          rowClassName={() => 'editable-row'}
          bordered
          size="small"
          rowKey={(item, index) => index}
          dataSource={sourcesData}
          columns={tempColumns}
        />
        <div align="center">
          <Button onClick={this.handleSavesalary} type="primary" style={{ marginBottom: 16 }}>
            保存
        </Button>
        </div>
      </div>
    );
  }
}
export default CitySalary;